<template>
  <div style="background-color: #15171e">
    <Topbar />

    <!-- 轮播图开始 -->
    <van-swipe :autoplay="3000" class="lunbo" prev next>
      <van-swipe-item
        :style="` background: url(${item}) no-repeat;background-position: -300px 0px;`"
        v-for="item in lunbo.images"
        :key="item.id"
      >
        <!-- <div class="guanggao" v-for="item in pageHeader" :key="item.id">
          <img :src="item.callToAction.logoUrl" alt="" />
          <p></p>
        </div> -->
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图结束 -->

    <!-- 游戏列表开始 -->
    <div class="gameLogo">
      <h2>游戏</h2>
      <div class="logo" v-for="item in navigation" :key="item.id">
        <img :src="item.iconUrl" alt="" />
      </div>
    </div>
    <!-- 游戏列表结束 -->

    <!-- 推荐开始 -->
    <h2>推荐</h2>
    <div
      @click="goProduct(item.destination)"
      class="card"
      v-for="item in personal"
      :key="item.id"
    >
      <div class="card_img">
        <img :src="item.verticalImageUrl" alt="" />
      </div>
      <div class="card_bottom">
        <div><img :src="item.family.iconUrl" alt="" /></div>
        <p class="subTitle">{{ item.title }}{{ item.subTitle }}</p>
        <p v-if="item.notification" class="notification">
          {{ item.notification }}
        </p>
        <p class="description">{{ item.description }}</p>
        <p class="price">{{ item.price.full }}起</p>
      </div>
    </div>
    <!-- 推荐结束 -->

    <!-- 精选开始 -->
    <h2>精选</h2>
    <div
      @click="goProduct(item.destination)"
      class="card"
      v-for="item in featured"
      :key="item.id"
    >
      <div class="card_img">
        <img :src="item.verticalImageUrl" alt="" />
      </div>
      <div class="card_bottom">
        <div><img :src="item.family.iconUrl" alt="" /></div>
        <p class="subTitle">{{ item.title }}{{ item.subTitle }}</p>
        <p v-if="item.notification" class="notification">
          {{ item.notification }}
        </p>
        <p class="description">{{ item.description }}</p>
        <p class="price">{{ item.price.full }}起</p>
      </div>
    </div>
    <!-- 精选结束 -->

    <!-- 当下流行开始 -->
    <h2>当下流行</h2>
    <div
      @click="goProduct(item.destination)"
      class="card"
      v-for="item in trending"
      :key="item.id"
    >
      <div class="card_img">
        <img :src="item.verticalImageUrl" alt="" />
      </div>
      <div class="card_bottom">
        <div><img :src="item.family.iconUrl" alt="" /></div>
        <p class="subTitle">{{ item.title }}{{ item.subTitle }}</p>
        <p v-if="item.notification" class="notification">
          {{ item.notification }}
        </p>
        <p class="description">{{ item.description }}</p>
        <p class="price">{{ item.price.full }}起</p>
      </div>
    </div>
    <!-- 当下流行结束 -->

    <!-- 热门赠礼开始 -->
    <h2>热门赠礼</h2>
    <div
      @click="goProduct(item.destination)"
      class="card"
      v-for="item in gifted"
      :key="item.id"
    >
      <div class="card_img">
        <img :src="item.verticalImageUrl" alt="" />
      </div>
      <div class="card_bottom">
        <div><img :src="item.family.iconUrl" alt="" /></div>
        <p class="subTitle">{{ item.title }}{{ item.subTitle }}</p>
        <p v-if="item.notification" class="notification">
          {{ item.notification }}
        </p>
        <p class="description">{{ item.description }}</p>
        <p class="price">{{ item.price.full }}起</p>
      </div>
    </div>
    <!-- 热门赠礼结束 -->

    <!-- 底部大图开始 -->
    <div class="download-app">
      <div class="bgimg">
        <div class="download-app-cta__description">
          <div class="d1">
            <img src="../assets/image/battle-net.svg" alt="" />
            <p>下载战网</p>
          </div>
          <div class="item-div">
            <img src="../assets/image/jiugongge.svg" alt="" />
            <p>一站式畅享暴雪游戏</p>
          </div>
          <div class="item-div">
            <img src="../assets/image/haoyou.svg" alt="" />
            <p>跟好友保持联络</p>
          </div>
          <div class="item-div">
            <img src="../assets/image/liwu.svg" alt="" />
            <p>购买数字版游戏和商品</p>
          </div>
        </div>
        <div class="download-app-cta__illustration"></div>
        <div class="download-app-cta__mobile-buttons">
          <van-button type="info" color="#0074e0" round>了解详情</van-button>
          <p>同时提供<a href="">移动应用</a></p>
        </div>
      </div>
    </div>
    <!-- 底部大图结束 -->
    <Footer />
  </div>
</template>

<script>
import Footer from "../components/footer.vue";
import Topbar from "../components/topbar.vue";
import {
  reqHomepage,
  reqPersonal,
  reqFeatured,
  reqTrending,
  reqGifted,
} from "../api/index";

export default {
  components: { Footer, Topbar },
  mounted() {
    // 轮播图 总览
    this.getHomepage();
    // 推荐
    this.getPersonal();
    // 精选
    this.getFeatured();
    // 当下流行
    this.getTrending();
    // 热门赠礼
    this.getGifted();
  },
  data() {
    return {
      value: "",
      lunbo: "",
      personal: "",
      featured: "",
      trending: "",
      gifted: "",
      navigation: "",
      pageHeader: "",
    };
  },

  methods: {
    // 轮播图 总览
    async getHomepage() {
      const { metaData, families, pageHeader } = await reqHomepage();
      // const res = await reqHomepage();
      this.lunbo = metaData;
      this.navigation = families;
      this.pageHeader = pageHeader.carousel.banners;
    },

    // 推荐
    async getPersonal() {
      const { browsingCards } = await reqPersonal();
      this.personal = browsingCards;
    },

    // 精选
    async getFeatured() {
      const { browsingCards } = await reqFeatured();
      this.featured = browsingCards;
    },

    // 当下流行
    async getTrending() {
      const { browsingCards } = await reqTrending();
      this.trending = browsingCards;
    },

    // 热门赠礼
    async getGifted() {
      const { browsingCards } = await reqGifted();
      this.gifted = browsingCards;
    },
    // 跳转详情
    goProduct(destination) {
      this.$router.push(`${destination}`);
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/home.css");
</style>
